<template>
  <div class="head" v-show="showHead">
    <div class="head-wrap">
      <div class="head-left">
        <img src="../../assets/logo.png" alt="logo" v-show="showLogo" v-on:click="toHome">
        <i class="iconfont icon-return" v-show="showBack" v-on:click="toBack"></i>
      </div>
      <div class="head-title">{{headTitle}}</div>
      <div class="head-right"></div>
    </div>
  </div>
</template>

<script>
  import {getCookie} from "../../assets/js/cookie";

  export default {
    name: "newHeader",
    data() {
      return {
        showHead: false,
        showLogo: false,
        showBack: false,
        headTitle: ''
      }
    },
    watch: {
      '$route': 'changeHeadMsg'
    },
    mounted() {
      if (getCookie('username')) {
        this.showHead = true
      }
      this.changeHeadMsg();
    },
    methods: {
      changeHeadMsg() {
        this.showHead = false;
        this.showLogo = false;
        this.showBack = false;
        if (this.$route.path == '/home' || this.$route.path == '/list' || this.$route.path == '/message' || this.$route.path == '/mine') {
          this.showHead = true;
          if (this.$route.path == '/home') {
            this.headTitle = 'home';
            this.showLogo = true
          } else {
            this.showBack = true;
            if (this.$route.path == '/list') {
              this.headTitle = 'list'
            } else if (this.$route.path == '/message') {
              this.headTitle = 'message'
            } else if (this.$route.path == '/mine') {
              this.headTitle = 'mine'
            }
          }
        } else if (this.$route.path == '/changePass') {
          this.showHead = true;
          this.showBack = true;
          this.headTitle = 'changePass';
        } else if (this.$route.path == '/updateInfo') {
          this.showHead = true;
          this.showBack = true;
          this.headTitle = 'updateInfo';
        } else if (this.$route.path == '/admin' || this.$route.path == '/add' || this.$route.path == '/admin' || this.$route.path == '/users') {
          this.showHead = true;
          if (this.$route.path == '/admin') {
            this.headTitle = 'admin';
            this.showLogo = true
          } else {
            this.showBack = true;
            if (this.$route.path == '/add') {
              this.headTitle = 'add'
            } else if (this.$route.path == '/users') {
              this.headTitle = 'users'
            }
          }
        }
        console.log(this.headTitle)
      },
      toHome() {
        this.$router.push('/home');
      },
      toBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped lang="less">
  .head {
    width: 6.9rem;
    height: 0.5rem;
    background-color: #ffffff;
    padding: 0.25rem 0.3rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    .head-wrap {
      width: 100%;
      height: 100%;
      .head-left {
        width: 0.5rem;
        height: 0.5rem;
        float: left;
        img {
          width: 100%;
          display: block;
        }
        .iconfont {
          font-size: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          display: block;
        }
      }
      .head-title {
        width: 5rem;
        height: 0.5rem;
        float: left;
        margin: 0 0.45rem;
        font-size: 0.36rem;
        line-height: 0.5rem;
        text-align: center;
      }
      .head-right {
        width: 0.5rem;
        height: 0.5rem;
        float: right;
        .iconfont {
          font-size: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          display: block;
        }
      }
    }
  }
  .nav-lists {
    width: 100%;
    height: 5rem;
    background-color: #41b883;
    position: fixed;
    top: 1rem;
    left: 0;
    .nav-list {
      width: 6rem;
      height: 0.3rem;
      display: block;
      padding: 0.25rem 0.3rem;
      margin: 0 auto;
      border-bottom: 1px solid #f1f1f1;
      font-size: 0.3rem;
      color: #ffffff;
      line-height: 0.3rem;
      text-align: left;
    }
  }
  .fade-leave-active, .fade-enter-active {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .fade-leave-active, .fade-enter {
    height: 0;
    opacity: 0;
  }
  .fade-leave, .fade-enter-active {
    height: 5rem;
    opacity: 1;
  }
</style>
